<template>
  <div class="container">
    <canvas
      ref="canvas"
      type="2d"
      :width="width"
      :height="height"
    >
    </canvas>
  </div>
</template>

<script>
import echarts from 'echarts'
import {getChart} from '../chart'

const systemInfo = wx.getSystemInfoSync()

export default {
  name: 'App',
  data() {
    return {
      width: systemInfo.windowWidth,
      height: systemInfo.windowHeight,
    }
  },
  mounted() {
    getChart(this.$refs.canvas, echarts, {
      width: this.width,
      height: this.height,
    }).then(this.initChart)
  },
  methods: {
    initChart(chart) {  
      chart.setOption({
        title: {
          text: 'Dispersion of house price\naccording to the number of bedrooms',
          x: 'center',
          y: 10,
          textStyle: {
            color: '#3259B8',
            fontSize: 16,
            fontWeight: 'normal',
          },
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '15%',
          right: '10%',

        },
        xAxis: {
          type: 'category',
          data: ['1 bedroom', '2 bedrooms', '3 bedrooms', '4 bedrooms', '5 bedrooms', '6 bedrooms'],
          nameTextStyle: {
            color: '#3259B8',
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#3259B8',
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: '#3259B8',
            fontSize: 14,
          },
          axisLabel: {
            formatter: '{value}\nCNY/㎡',
          },
          axisLine: {
            lineStyle: {
              color: '#3259B8',
            }
          },
          splitLine: {
            lineStyle: {
              color: '#A7BAFA',
            },
          }
        },
        series: [{
          name: 'boxplot',
          type: 'boxplot',
          data: [
            [30645, 53490, 66640.5, 89123, 159949],
            [19464, 46454, 59139, 83479, 179440],
            [16704, 46041, 60155, 86818, 159980],
            [21543, 41619.75, 58819.5, 87540, 159978],
            [15202, 35757, 44721, 59916.5, 159825],
            [22158, 34754.5, 49718, 71637, 139972],
          ],
          itemStyle: {
            normal: {
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#F02FC2' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#3EACE5' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              borderWidth: 2,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(240,47,194,0.7)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(62,172,299,0.7)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
            }
          },
          tooltip: {
            formatter(param) {
              return [
                'Upper: ' + param.data[5] + ' CNY/㎡',
                'Q3: ' + param.data[4] + ' CNY/㎡',
                'Median: ' + param.data[3] + ' CNY/㎡',
                'Q1: ' + param.data[2] + ' CNY/㎡',
                'Lower: ' + param.data[1] + ' CNY/㎡'
              ].join('<br/>')
            }
          }
        }]
      })
    }
  },
}
</script>

<style>
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>
